import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'
import { h }
from 'vue'
const Layout = () =>
    import ('@/views/Layout')
const Home = () =>
    import ('@/views/home')
const TopCategory = () =>
    import ('@/views/category/index')
const SubCategory = () =>
    import ('@/views/category/sub')
const Goods = () =>
    import ('@/views/goods/index')
const XtxCartPage = () =>
    import ('@/views/cart/index.vue')
const Login = () =>
    import ('@/views/login/index')
const LoginCallback = () =>
    import ('@/views/login/login-callback')
const PayCheckout = () =>
    import ('@/views/menber/pay/checkout')

const PayIndex = () =>
    import ('@/views/menber/pay/index')
const PayResult = () =>
    import ('@/views/menber/pay/result')
const MemberLayout = () =>
    import ('@/views/menber/Layout')
const MemberHome = () =>
    import ('@/views/menber/home')
const MemberOrder = () =>
    import ('@/views/menber/order')
const MemberOrderDetail = () =>
    import ('@/views/menber/order/detail')
const routes = [{
            path: '/',
            component: Layout,
            children: [{
                    path: '/',
                    component: Home
                }, {
                    path: '/category/:id',
                    component: TopCategory
                }, {
                    path: '/category/sub/:id',
                    component: SubCategory
                },
                {
                    path: '/product/:id',
                    component: Goods
                }, {
                    path: '/cart',
                    component: XtxCartPage
                },
                {
                    path: '/member/checkout',
                    component: PayCheckout
                },
                {
                    path: '/member/pay',
                    component: PayIndex
                },
                { path: '/pay/callback', component: PayResult }, {
                    path: '/member',
                    component: MemberLayout,
                    children: [
                        { path: '/member', component: MemberHome },
                        // 平级的
                        // { path: '/member/order', component: MemberOrder },
                        // { path: '/member/order/:id', component: MemberOrderDetail }
                        {
                            path: '/member/order/',
                            // vue3.0 需要有嵌套关系才能模糊匹配   
                            // 模糊匹配  
                            // 相当于又写了一级路由嵌套只不过不用再组件中写routerview
                            // 相当于routerview 组件中写的。自己实现要再组件中写
                            component: { render: () => h( < RouterView / > ) },
                            children: [
                                { path: '', component: MemberOrder },
                                { path: ':id', component: MemberOrderDetail }
                            ]
                        }
                    ]
                }

            ]
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/login/callback',
            component: LoginCallback
        }
    ]
    // vue3   createRouter函数 创建路由
const router = createRouter({
        history: createWebHashHistory(),
        routes,
        scrollBehavior() {

            return { left: 0, top: 0 }
        }
    })
    // 前置导航守卫
router.beforeEach((to, from, next) => {
    // 用户信息
    const { token } = store.state.user.profile
        // 跳转去member开头的地址却没有登录
    if (to.path.startsWith('/member') && !token) {
        next({ path: '/login', query: { redirectUrl: to.fullPath } })
    }
    next()
})
export default router